<template>
  <el-container class="user-container">
    <el-backtop />
    <div
      :class="[
        'header-top',
        !isUp ? 'bgStyle' : scrollTop == 0 ? '' : 'noBgStyle',
      ]"
    >
      <div
        style="
          font-weight: 700;
          color: #eeeeee;
          font-size: 20px;
          margin-left: 15px;
        "
      >
        SIK
      </div>
      <div class="header-link">
        <router-link to="/home" class="router-link">
          <i class="el-icon-s-home"></i>首页
        </router-link>
        <router-link to="" class="router-link">
          <i class="el-icon-search"></i>搜索</router-link
        >
        <router-link to="" class="router-link">
          <i class="el-icon-message"></i>留言</router-link
        >
        <router-link v-if="id == null" to="/user/login" class="router-link">
          <i class="el-icon-user-solid"></i>登录</router-link
        >
        <!-- 下拉框 -->

        <el-dropdown v-else>
          <span class="avatar">
            <el-avatar
              :size="45"
              :src="imagesUrl == null ? '/avatar.jpg' : imagesUrl"
            ></el-avatar>
            <i class="el-icon-caret-bottom" style="color: #fff"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <i class="el-icon-lock"></i>
                修改密码</el-dropdown-item
              >
              <el-dropdown-item>
                <i class="el-icon-upload"></i>
                上传头像</el-dropdown-item
              >
              <el-dropdown-item divided @click.native.prevent="logout">
                <i class="el-icon-switch-button"></i>
                退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <el-main style="padding: 0; width: 100vw">
      <router-view :key="key"></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      scrollY: null,
      scrollTop: 0,
      isUp: false,
      id: null,
      imagesUrl: null,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    this.id = sessionStorage.getItem("id");
  },
  watch: {
    scrollY: {
      immediate: true,
      handler(newVal, oldVal) {
        if (oldVal && newVal > oldVal) {
          // console.log("向下滑");
          this.isUp = false;
        } else {
          // console.log("未滑动或向上滑");
          this.isUp = true;
        }
      },
    },
  },
  methods: {
    handleScroll() {
      this.scrollY = document.documentElement.scrollTop;
      this.scrollTop = this.scrollY;
    },
    logout() {
      // 1.删除localStorage中token
      localStorage.removeItem("token");
      sessionStorage.removeItem("id");
      this.id = null;
      // 2.跳转路径
      this.$message.success({
        type: "success",
        message: "退出登录成功",
        duration: 800,
      });
    },
  },
  computed: {
    key() {
      return this.$route.path + Math.random();
    },
  },
};
</script>
<style scoped lang="stylus">
.el-dropdown
  height: 50px
  position:absolute
  right:-24px
  top:11px
.el-avatar
  &>>>img
    width: 45px;
    cursor: pointer;
</style>
<style lang="stylus">
.user-container
  width calc(100vw - 17px)
  overflow hidden
  .header-top
    position fixed
    z-index 2
    width calc(100vw - 17px)
    height 60px
    display flex
    padding 0 10px 0 27px
    justify-content space-between
    line-height 60px
    color #111
    &.bg-top
      background-color transparent
    &.bgStyle
      display none
    &.noBgStyle
      background-color rgba(255,255,255,0.3)
    .header-link
      width: 300px
      margin-right: 55px
      text-align: center
      position:relative
      .router-link
        text-decoration: none
        color:#EEEEEE
        font-weight:600
        font-size :14px
        margin-left :15px
        // padding:4px 0
        // border-bottom:0px solid #ff534a
        transition: all 0.6s
        position:relative
        &::after
          content: ''
          position: absolute;
          bottom: -6px;
          left: 0;
          z-index: -1;
          width: 0;
          height: 3px;
          background-color: #ff534a;
          transition: all .3s ease-in-out;
        &:hover:after
          width: 100%
        i
          margin-right: 10px
    .header-foot
      position absolute
      top: 100px
      left :calc(50vw - 8px)
</style>
